<template>
	<view>
		<swiper class="swiper" indicator-dots="ture" autoplay="true" indicator-active-color="#1890ff" indicator-color="#fff"
		 circular="true">
			<block v-for="(item,index) in bannerArr">
				<swiper-item :data-id='item.id' class="banner-item">
					<image :src="item.image" class="slide-image" mode="widthFix" lazy-load="true" @click="goto(`{item.url}`)"></image>
				</swiper-item>
			</block>
		</swiper>
		
		<view class="video-category">
			<block v-for="(item,index) in categorys">
				<view class="video-category-item" @click="toList" :data-id = "item.id">
					<view>{{item.title}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import { Adv } from '@/model/adv.js';
	var adv = new Adv();
	import {
		Video
	} from '@/model/video.js';
	var video = new Video();
	import moment from '@/utils/moment';
	export default {
		components: {},
		data() {
			return {
				
				page: 1,
				bannerArr:[],
				categorys:[],
				showInput:true
			}
		},
		onLoad(options) {
			this.banner();
			this.category();
		},
		onShow(){
			this.banner();
			this.category();
		},
		onPullDownRefresh() {

		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm');
			},
		},
		methods: {
			banner:function(){
				var that = this;
				//获得bannar信息
				var params = {
					'num': 3,
					'key': 'zhibo'
				};
				adv.list(params, (data) => {
					that.$data.bannerArr = data.items;
				});
			},
			
			category: function() {
				var that = this;
				var params = {
					pid: 0
				}
				video.category(params, (data) => {
					that.$data.categorys = data.items
				})
			},
			toList:function(e){
				var id = this.getDataSet(e,'id');
				var url = "/pages/video/list?cate_id="+id;
				this.goto(url);
			}
		}

	}
</script>

<style>
	page{background-color: #fff;}
	.swiper{min-height: 360rpx;}
	.center{margin: 0 auto;}
	.slide-image{width: 100%;}
	.tab{display: flex;margin:20rpx 0 20rpx 0;}
	.tab-item{flex: 1;text-align: center;}
	.tab-name{width: 100rpx;margin: 0 auto;padding:20rpx 0;color: #666;}
	.item-active{border-bottom: 4rpx solid #1890ff;color: #1890ff;}
	.video-list{display: flex;flex-wrap: wrap;}
	.video-2{width: 49%;margin-bottom: 50rpx;}
	.video-2:nth-child(odd){margin-right: 2%;}
	.video-2 .cover image{width: 100%;height: 250rpx !important;}
	.video-name{color: #111;padding-left:20rpx;font-size: 32rpx;line-height: 38rpx;max-height: 76rpx;overflow: hidden;margin-top: 10rpx;}
	.video-description{color: #999;padding-left:20rpx;font-size: 28rpx;margin-top: 10rpx;line-height: 36rpx;max-height: 72rpx;overflow: hidden;}
	.video{height: 100%;}
	
	/*分类*/
	.video-category{display: flex;justify-content: space-between;padding: 0 4%;width: 100%;flex-wrap: wrap;margin-top: 40rpx;box-sizing: border-box;}
	.video-category-item{color: #fff;width: 45%;text-align: center;padding: 50rpx 0;border-radius: 15rpx;margin-top: 30rpx;}
</style>
